<?php 
if(isset($_GET['img'])){
	$product_detail_image=$_GET['img'];
}else{
	$product_detail_image='table-details.jpg';
}
?>
<div class="product_info">
	<div class="close"><img src="img/css-element/close.png"></div>
	<div class="product-details-container">
    	<div class="text-box">
   			<div class="title">
   			<h1>Caned Bergere With Leather Cushion</h1>
            <h2>492269</h2>
		</div>
			<div class="descriptions">
				<span>Availability</span>
				<p>1 week 10 | 2-4 weeks 0 | 6-8 weeks 7 | <br> 8-14 weeks 0 | 14-22 weeks 3</p>
				<span>Description</span>
				<p>Caned Bergere in Walnut with turned legs and hand<br>made antique brass casters.With leather cushion.</p>
				<div class="plus" style="display:none">
				<span>Weight</span>
				<p>CBM: 0.55 / CBF: 19.41 / LBS: 44.10 <br> KG: 20.00 / COM: 1.00yard</p>
				<span>Dimensions (W x D x H)</span>
				<p>65 x 64 x 90.1 cm<br>25 ½ x 25 ¼ x 35 ½ inches</p>
                <span>Other dimensions</span>
                <p>Arm height: 66.5 cm (26 ¼ inches) <br> Seat height: 40.1 cm (15 ¾ inches)</p>
                <span>Collections</span>
                <p>Formal Walnut Collection</p>
                <span>Finish code</span>
                <p>FIN-WAL-02 (Medium Walnut Finish)</p>
				</div>
			</div>
			<div class="read-more" style="padding-bottom:5px;">Read more</div>
	</div>
	<div>
			<div class="product-details-img"><img src="img/resize/original/<?php echo $product_detail_image;?>" border="0"></div>
            	<div id="product-details-nav-container">
            		<div class="details-nav">
   						<ul>
							<li><a rel="img/related-product/table-details.jpg" class="active"><img src="img/product-details/table/main.jpg" border="0"></a></li>
     						<li><a rel="img/related-product/main_details_1.jpg" title="mouse tracks"><img src="img/product-details/table/details-1.jpg" border="0"></a></li>
      						<li><a rel="img/related-product/main_details_2.jpg" title="mouse tracks" ><img src="img/product-details/table/details-2.jpg" border="0"></a></li>
      						<li><a rel="img/related-product/main_details_3.jpg" title="mouse tracks" ><img src="img/product-details/table/details-4.jpg" border="0"></a></li>
      						<li><a rel="img/related-product/main_details_4.jpg" title="mouse tracks" ><img src="img/product-details/table/details-5.jpg" border="0"></a></li>
  				 		</ul>
					</div>
                    <div class="details-nav-text-container">PRODUCTS DETAILS</div>
				</div>
                
                <div class="alt-rel-product-nav-container">
            		<div class="details-nav" id="alternative_panel">
   						<ul>
     						<li><a href="alternative_product.php?pid=1"  rel="alternative_product.php?pid=1"><img src="img/product-details/table/details-1.jpg" border="0"></a></li>
      						<li><a href="alternative_product.php?pid=2"  rel="alternative_product.php?pid=2"><img src="img/product-details/table/details-2.jpg" border="0"></a></li>
      						<li><a href="alternative_product.php?pid=3"  rel="alternative_product.php?pid=3"><img src="img/product-details/table/details-3.jpg" border="0"></a></li>
     					 	<li><a href="alternative_product.php?pid=4"  rel="alternative_product.php?pid=4"><img src="img/product-details/table/details-4.jpg" border="0"></a></li>
      						<li><a href="alternative_product.php?pid=5"  rel="alternative_product.php?pid=5"><img src="img/product-details/table/details-5.jpg" border="0"></a></li>
  				 		</ul>
					</div>
                    <div class="details-nav-text-container">ALTERNATIVE PRODUCTS</div>
				</div>
                
                <div class="alt-rel-product-nav-container">
            		<div class="details-nav" id="relative_panel">
   						<ul>
     						<li><a href="relative_product.php?id=2" rel="relative_product.php?id=2"><img src="img/product-details/table/details-1.jpg" border="0"></a></li>
      						<li><a href="relative_product.php?id=3" rel="relative_product.php?id=2"><img src="img/product-details/table/details-2.jpg" border="0"></a></li>
      						<li><a href="relative_product.php?id=4" rel="relative_product.php?id=2"><img src="img/product-details/table/details-3.jpg" border="0"></a></li>
     					 	<li><a href="relative_product.php?id=5" rel="relative_product.php?id=2"><img src="img/product-details/table/details-4.jpg" border="0"></a></li>
      						<li><a href="relative_product.php?id=6" rel="relative_product.php?id=2"><img src="img/product-details/table/details-5.jpg" border="0"></a></li>
  				 		</ul>
					</div>
                    <div class="details-nav-text-container">RELATED PRODUCTS</div>
				</div>
			</div>
</div><!--WRAPPER END-->

<script>
$(document).ready(function () {
	$('.cpanel').animate({
		"height": "100%", 
		"opacity": "1"
		}, "slow",function() {
		// Animation complete.
	});
	$('.read-more').click(function(){
		var more_productClicked = $(this).parent();
		more_productClicked.find(".plus").slideToggle(800, function(){
			if($(this).css('display')=='block'){
				$(this).show();
				$('.read-more').text('Close...');
			}else{
				$(this).hide();
				$('.read-more').text('Read more...');
			}
		});
	});
	
	$('#alternative_panel a,#relative_panel a').cluetip({		  	
		  cluetipClass: 'jtip', 
		  width: 610,
		  showTitle: false,
		  arrows: true, 
		  dropShadow: false,
		  mouseOutClose: true,
		  hoverIntent:true,
		  cursor:'',
		  sticky: true,
		 /*closePosition: 'title',
		  hoverIntent: false,*/		  
		 // activation: 'click',
		  closeText:'<img src="img/css-element/quick-view-close-button.png" style="padding-top:2px">',
		  positionBy: 'bottomTop', 
		  tracking: 'true',
		  topOffset: 25,
	});
	$('#product-details-nav-container a').click(function(){
		$('#product-details-nav-container a').removeClass('active');
		$this=$(this);
		$this.addClass('active');
		$('.product-details-img img').fadeOut(1000, function(){
			$('.product-details-img img').attr('src',$this.attr('rel')).fadeIn(500);
		});
	});
		
});
</script>